<template>
	<view>
		<view class="od-banner">
			<image class="od-banner-icon" src="/static/resource/images/od_bg_icon.png" mode="widthFix" />
			<view class="od-jd od-jd-0">
				<view class="od-jd-out">
					<view class="od-jd-in"></view>
				</view>
				<view class="vp-flex od-jd-text">
					<view class="vp-flex_1">
						<text class="od-jd-st-0">填写订单</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-10">在线支付</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-20">专人服务</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-30">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pub-box">
			<view class="pub-box-bd">
				<view class="weui-cell weui-cell_input">
					<view class="weui-cell__hd">
						<image class="serv-icon"
							:src="service.icon_image ? service.icon_image_url : '../../static/images/avatar.jpg'">
						</image>
					</view>
					<view class="weui-cell__bd">
						<text class="serv-name">{{ service.name }}</text>
					</view>
					<view class="weui-cell__ft">
						<view class="f5 ic_info" @click="handleTap">服务内容</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="service.stype == 10 || service.stype == 15 || service.stype == 20">

			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊医院</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<picker @change="onHospitalChange" :value="hospital_index" :range="hospitals"
									range-key="name">
									<input type="text" :disabled="true" placeholder="请选择要就诊的医院"
										:value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
								</picker>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊时间</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
									placeholder="请选择就诊时间"></dtPicker>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input" @click="onClientChange">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊人</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<input class="weui-input" placeholder-class="vp-placeholder" placeholder="请选择就诊人"
									style="text-align: right;" :disabled="true" :value="client.name" type="text">
							</view>
						</view>
					</view>
					<block v-if="service.stype == 15">
						<!-- 接送陪诊 -->
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">接送地址</view>
							<view class="weui-cell__bd">
								<input class="weui-input" name="receiveAddress" style="text-align: right"
									placeholder-class="vp-placeholder" placeholder="请填写就诊人所在地址"
									v-model="order.receiveAddress" />
							</view>
						</view>
					</block>

					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">联系电话</view>
						<view class="weui-cell__bd">
							<input class="weui-input" type="number" name="tel" style="text-align: right"
								placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
						</view>
					</view>
				</view>
			</view>
			<view class="pub-box">
				<view class="pub-box-tt">服务需求</view>
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__bd">
							<textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
								placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="service.stype == 30 || service.stype == 40">
			<!-- 送取结果,代跑取药 -->
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">所在医院</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<picker @change="onHospitalChange" :value="hospital_index" :range="hospitals"
									range-key="name">
									<input type="text" :disabled="true" placeholder="请选择就诊所在医院"
										:value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
								</picker>
							</view>
						</view>
					</view>

					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">服务时间</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
									placeholder="请选择期望服务时间"></dtPicker>
							</view>
						</view>
					</view>

					<view class="weui-cell weui-cell_input" @click="onAddressChange">
						<view class="weui-cell__hd">
							<view class="weui-label">收件信息</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<input class="weui-input" :disabled="true" style="text-align: right"
								placeholder-class="vp-placeholder" placeholder="请选择收件信息" :value="
		                                                        order.address.userName
		                                                            ? order.address.userName + '(' + order.address.cityName + order.address.countyName + order.address.detailInfo + ')'
		                                                            : ''
		                                                    " />
							<!-- {{order.address?(order.address.userName+'('+order.address.telNumber+')'):''}} -->
						</view>
					</view>
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">联系电话</view>
						<view class="weui-cell__bd">
							<input class="weui-input" type="number" name="tel" style="text-align: right"
								placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
						</view>
					</view>
				</view>
			</view>

			<view class="pub-box">
				<view class="pub-box-tt">服务需求</view>
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__bd">
							<textarea name="demand" auto-height placeholder="如有其他服务要求请在此填写.."
								placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
						</view>
					</view>
				</view>
			</view>
		</block>
		<view style="height: 300rpx"></view>
		<!-- 悬浮提交按钮 -->
		<view class="vp-foot">
			<view style="background: #ffffff; padding: 20rpx">
				<view class="xieyi" style="text-align: center">
					<text :class="'is_xieyi ' + (is_xieyi ? 'is_xieyi_on' : '')" @click="onXieyiChange">我已阅读并同意</text>
					<navigator :url="cfg.page_xy">《用户协议》</navigator>
					<text>和</text>
					<navigator :url="cfg.page_fw">《服务协议》</navigator>
				</view>
				<view>
					<button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="submit">
						确认下单
						<block v-if="order.price > 0">（支付{{ order.price }}元）</block>
					</button>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :is-mask-click="false" background-color="#fff">
			<view class="popup-content">
				<view class="group">
					<input class="uni-input" type="tel" v-model="validMobile.phone" placeholder="手机号" />
				</view>
				<view class="group">
					<input class="uni-input" v-model="validMobile.validCode" placeholder="验证码" />
					<text class="valid-text" @click="countdownChange">{{countdown.validText}}</text>
				</view>
			</view>
			<view class="btns">
				<view class="cancal" @click="cancal">取消</view>
				<view class="ok" @click="ok">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const app = getApp()
	const utils = app.globalData.utils
	onLoad((options) => {
		main_load(options)
	})
	const service = ref({})
	const hospitals = ref([])
	const hospital_index = ref(0)
	const order = reactive({
		demand: '',
		receiveAddress: '',
		tel: '',
		starttime: '',
		address: {
			userName: "",
			cityName: "",
			countyName: '',
			detailInfo: ''
		}
	})
	const cfg = reactive({
		page_xy: '',
		page_fw: ""
	})
	const is_xieyi = ref(false)
	const client = reactive({
		name: '',
		age: '',
		mobile: '',
		sex: ''
	})
	const validMobile = reactive({
		phone: '17362296427',
		validCode: ''
	})
	const countdown = reactive({
		validText: '获取验证码',
		time: 3
	})
	const popup = ref()
	const main_load = (options) => {
		utils.request({
			url: '/Service/order',
			data: {
				svid: options.svid
			},
			success: (res) => {
				service.value = res.data.service
				hospitals.value = res.data.hospitals
				hospital_index.value = options.hid - 1
				order.price = hospitals.value[hospital_index.value].service_price
			}
		})
	}
	const onHospitalChange = (event) => {
		const value = event.detail.value
		hospital_index.value = parseInt(value)
		order.price = hospitals.value[value]
	}
	const onClientChange = () => {
		uni.navigateTo({
			url: "../clients/index?act=select"
		})
	}
	uni.$on("clientChange", (data) => {
		client.name = data.name
		client.age = data.age
		client.sex = data.sex
		client.mobile = data.mobile
	})
	const handleTap = () => {}
	const onStartTimeChanged = (data) => {
		order.starttime = data.detail.value
	}
	const onAddressChange = () => {
		uni.chooseAddress({
			success: res => {
				console.log(res);
				order.address.cityName = res.cityName
				order.address.countyName = res.countyName
				order.address.detailInfo = res.detailInfo
				order.address.userName = res.userName
			},
			fail: res => {
				console.log(res);
			}
		})
	}
	const onXieyiChange = () => {
		is_xieyi.value = -!is_xieyi.value
	}
	const submit = () => {
		popup.value.open('buttom')
		const orderData = {
			address: {},
			client: {}
		}
		orderData.address.cityName = order.address.cityName
		orderData.address.countyName = order.address.countyName
		orderData.address.detailInfo = order.address.detailInfo
		orderData.address.userName = order.address.userName
		orderData.demand = order.demand
		orderData.starttime = order.starttime
		orderData.receiveAddress = order.receiveAddress
		orderData.hospital_id = hospitals.value[hospital_index.value].id
		orderData.hospital_name = hospitals.value[hospital_index.value].name
		orderData.service_code = service.value.code
		orderData.service_id = service.value.id
		orderData.service_name = service.value.name
		orderData.service_stype = service.value.stype
		orderData.client.age = client.age
		orderData.client.sex = client.sex
		orderData.client.name = client.name
		orderData.client.mobile = client.mobile
	}
	const flag = ref(false)
	const countdownChange = () => {
		if (!validMobile.phone) {
			uni.showToast({
				title: '请填写手机号'
			})
			return
		}
		if (flag.value) {
			return
		}
		const timer = setInterval(() => {
			if (countdown.time <= 0) {
				countdown.time = 0
				countdown.validText = "获取验证码"
				clearInterval(timer)
				flag.value = false
				countdown.time = 10
			} else {
				flag.value = true
				countdown.time--
				countdown.validText = countdown.time
			}

		}, 1000)
		// 发送验证码
		utils.request({
			url: "/get/code",
			data: {
				tel: validMobile.phone
			},
			method: "post",
			success: (res) => {

			}
		})
	}
	const ok = () => {
		// 验证验证码
		utils.request({
			url: '/user/authentication',
			method: "post",
			data: {
				tel: validMobile.phone,
				code: validMobile.validCode
			},
			success: (res) => {
				console.log(res);
				uni.setStorageSync("token",res.data.token)
				popup.value.close()
			},
			fail: (res) => {
				uni.showToast({
					title: res.msg,
					icon:'none'
				})
			}

		})

	}
	const cancal = () => {
		popup.value.close()
	}
</script>

<style>
	page {
		background: #f0f0f0;
	}

	.weui-cells {
		margin: 0;
	}

	.weui-cell {
		padding: 20rpx;
	}

	.weui-cells::before {
		display: none;
	}

	.weui-label {
		width: auto;
	}

	.weui-cell__ft {
		color: #353535;
	}

	.weui-cell__ft text {
		color: #353535;
	}

	.od-banner {
		overflow: hidden;
		position: relative;
		background: url() repeat-y center;
		background-size: 100%;
	}

	.od-banner-icon {
		position: absolute;
		top: 30rpx;
		right: -20rpx;
		width: 130rpx;
		opacity: 0.6;
	}

	.od-jd {
		margin: 60rpx 40rpx;
	}

	.od-jd-out {
		background: #ffffff;
		border: 5rpx solid #ffffff;
		height: 20rpx;
		line-height: 20rpx;
		border-radius: 50rpx;
		overflow: hidden;
		position: relative;
	}

	.od-jd-in {
		height: 20rpx;
		line-height: 20rpx;
		border-radius: 50rpx;
		overflow: hidden;
		width: 0%;
		background: url() repeat-y center;
		background-size: 100%;
	}

	.od-jd-text {
		text-align: center;
		padding-top: 30rpx;
	}

	.od-jd-text text {
		color: #ffffff;
		font-size: 26rpx;
		opacity: 0.7;
	}

	.od-jd-0 .od-jd-in {
		width: 12%;
	}

	.od-jd-0 .od-jd-st-0 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-10 .od-jd-in {
		width: 37%;
	}

	.od-jd-10 .od-jd-st-10 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-20 .od-jd-in {
		width: 64%;
	}

	.od-jd-20 .od-jd-st-20 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-30 .od-jd-in {
		width: 100%;
	}

	.od-jd-30 .od-jd-st-30 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-40 .od-jd-in {
		width: 100%;
		background: #999999;
	}

	.serv-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin: 15rpx 15rpx 15rpx 0;
	}

	.serv-name {
		font-weight: bold;
	}

	.pub-box {
		margin: 20rpx;
		position: relative;
	}

	.pub-box-tt {
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		padding-left: 10rpx;
	}

	.pub-box-tt text {
		font-size: 24rpx;
	}

	.pub-box-ttl {
		padding-left: 10rpx;
	}

	.pub-box-ttl text {
		color: #888888;
	}

	.pub-box-ttr {
		position: absolute;
		right: 10rpx;
		top: 0;
		height: 80rpx;
		line-height: 80rpx;
	}

	.pub-box-ttr text {
		color: #576b95;
	}

	.pub-box-bd {
		border: 1rpx solid #eeeeee;
		border-radius: 10rpx;
		overflow: hidden;
		background: #ffffff;
		position: relative;
	}

	.pub-box-bd .weui-cell::before {
		left: 20rpx;
	}

	.xieyi {
		text-align: center;
		padding-bottom: 20rpx;
	}

	.xieyi text {
		font-size: 28rpx;
	}

	.xieyi navigator {
		font-size: 28rpx;
		display: inline-block;
		color: #0bb684;
	}

	.is_xieyi {
		display: inline-block;
		padding-left: 36rpx;
		background: url() no-repeat left center;
		background-size: 30rpx;
	}

	.is_xieyi_on {
		background-image: url();
	}

	.popup-content {
		width: 600rpx;
		height: 260rpx;
		padding: 20rpx;
	}

	.popup-content .group {
		margin: 20rpx;
		display: flex;
	}

	.popup-content .group input {
		padding-left: 10rpx;
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.popup-content .group .valid-text {
		width: 230rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #409eff;
	}

	.btns {
		display: flex;
		border-top: 2rpx solid #f5f5f5;
	}

	.btns view {
		flex: 1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.btns .cancal {
		border-right: 2rpx solid #f5f5f5;
	}

	.btns .ok {
		color: #ee0a24;
	}

	.uni-popup__wrapper {
		border-radius: 20rpx;
	}

	.text-center {
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.pay-box {
		padding: 40rpx;
	}

	.pay-box canvas {
		margin: 0 auto;
	}
</style>